<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="序号" type="index" :index="indexMethod" width="80" />
    <el-table-column prop="subjectName" label="所属学科" min-width="220" />
    <el-table-column prop="directoryName" label="目录名称" min-width="220" />
    <el-table-column prop="username" label="创建者" min-width="220" />
    <el-table-column label="创建日期" min-width="220">
      <template #default="{row}">
        {{getTime(row.addDate)}}
      </template>
    </el-table-column>
    <el-table-column prop="totals" label="面试题数量" min-width="180" />
    <el-table-column prop="state" label="状态" min-width="180">
      <template #default="{row}">{{row.state?'已启用':'已禁用'}}</template>
    </el-table-column>

    <el-table-column label="操作" fixed="right" width="140">
      <template #default="{row}">
        <el-button @click="changeState(row)" type="text" size="small">
          {{row.state?'禁用':'启用'}}
        </el-button>

        <el-button @click="openDialog(row)" :disabled="!!row.state" type="text" size="small">修改</el-button>
        <el-button @click="del(row.id)" :disabled="!!row.state" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getTimes } from '@/utils'
import { list, changeState, remove } from '@/api/hmmm/directorys.js'

export default {
  name: 'tags-table',
  props: ['page', 'pageSize'],
  data () {
    return {
      tableData: []
    }
  },
  watch: {
    subjectID () {
      this.getlist({ page: this.page, pagesize: this.pageSize })
    }
  },
  computed: {
    subjectID () {
      return this.$route.query.id
    }
    // uname () {
    //   return this.$route.query.name
    // }
  },
  created () {
    if (this.subjectID) {
      this.getlist({ subjectID: this.subjectID, page: this.page, pagesize: this.pageSize })
    } else {
      console.log('没传递参数')
      this.getlist({ page: this.page, pagesize: this.pageSize })
    }
  },
  methods: {
    // 修改
    openDialog (row) {
      // console.log(row)
      this.$emit('openDialog', row)
    },
    // 删除
    del (id) {
      const data = { page: this.page, pagesize: this.pageSize }
      if (this.subjectID) data.subjectID = +this.subjectID
      // 提示消息
      this.$confirm('此操作将永久删除该文章, 是否继续?', {
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功')
        // 刷新列表
        // const res = await this.getlist({ page: this.page, pagesize: this.pageSize })
        const res = await this.getlist(data)
        // console.log(res)
        if (res.pages >= 1 && res.items.length === 0) this.$emit('pageChange')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 改变状态
    async changeState (row) {
      row.state = row.state ? 0 : 1
      await changeState({ id: row.id, state: row.state })
      this.$message.success('操作成功')
    },

    handleClick (row) {
      console.log(row)
      // this.$emit('handleClick', row)
    },

    // 序号
    indexMethod (index) {
      return index + 1 + (this.page - 1) * this.pageSize
    },
    // 格式化时间
    getTime (time) {
      return getTimes(time)
    },
    // 获取数据函数
    async getlist (data) {
      const res = await list(data)
      // console.log(res)
      if (res.status !== 200) return this.$message('获取列表失败')
      this.tableData = res.data.items
      this.$emit('getpages', res.data.counts, res.data.pages)

      return res.data
    }

  }

}
</script>

<style lang="scss" scoped>
.el-icon-film {
  padding-left: 5px;
  color: blue;
}
</style>
